<template>
	<view class="feedback-container">

		<view class="feedback-content-title">
			意见反馈：
		</view>
		<view class="feedback-content-text">
			<textarea class="text-content" v-model.trim="content" placeholder="请输入您要反馈的内容"></textarea>
		</view>


		<view class="feedback-content-title">
			反馈图片：
		</view>
		<view class="feedback-content-image">
			<view class="feedback-image-item" v-for="(item,i) in imageList" :key="i">
				<view class="item-clos" @click="closImage(i)">
					<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
				</view>
				<view class="item-box">
					<image :src="item.url" mode="aspectFill"></image>
				</view>
			</view>
			<view class="feedback-image-item" v-if="imageList.length < 5">
				<view class="item-box" @click="addImage">
					<uni-icons type="plusempty" size="50" color="#ddd"></uni-icons>
				</view>
			</view>
		</view>

		<button class="feedback-btn" type="warn" @click="feedBackSubmit">提交反馈意见</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				imageList: [],

			}
		},
		methods: {
			//添加上传图片
			addImage() {
				const count = 5 - this.imageList.length;
				uni.chooseImage({
					count,
					success: res => {
						res.tempFiles.forEach((item, i) => {
							if (count > i) {

								this.imageList.push({
									url: item.path,
									// #ifdef MP-WEIXIN
									name: Date.now().toString() + item.path.substr(item.path
										.lastIndexOf('.'))
									// #endif
									// #ifndef MP-WEIXIN
									name: item.name
									// #endif

								})
							}
						})
					}
				})
			},
			//删除需要上传的图片
			closImage(i) {
				this.imageList.splice(i, 1)

			},
			//提交
			async feedBackSubmit() {

				if (!this.content) {
					uni.showToast({
						title: '文本内容不能为空',
						icon: 'none'
					});
					return
				}
				//上传图片
				uni.showLoading({})
				const feedBackImgList = await Promise.all(this.getFiledId())
				uni.hideLoading()
				//提交内容
				const {
					msg
				} = await this.$http.updata_feedback({
					content: this.content,
					imgList: feedBackImgList,
					userId: this.userInfo._id
				})
				uni.showToast({
					title: msg,
					icon: 'success',
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/self/self'
					})
					this.content = '';
					this.imageList = []
				}, 1500)

			},
			//获取上传图片地址id
			getFiledId() {
				return this.imageList.map(item => {

					return new Promise(async resolve => {
						const res = await uniCloud.uploadFile({
							cloudPath: item.name,
							filePath: item.url
						})
						resolve(res.fileID)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'css/feedback.scss'
</style>
